<script setup lang="ts">
import { ref } from 'vue';
import SortItems from '@/components/SortItems.vue';

// 数据源
const dataSource = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].sort(() => Math.random() - 0.5));

/**
 * 处理打乱顺序
 */
const handleShuffle = () => {
  dataSource.value.sort(() => Math.random() - 0.5);
}

/**
 * 冒泡排序算法
 * @param arr 待排序数组
 */
const bubbleSort = (arr: number[]) => {
  // 请实现代码

  return arr;
}

/**
 * 处理排序
 */
const handleSort = () => {
  dataSource.value = bubbleSort(dataSource.value);
}
</script>

<template>
  <div>
    <h1>冒泡排序</h1>
    <p class="control">
      <button @click="handleShuffle">打乱顺序</button>
      <button @click="handleSort">开始排序</button>
    </p>

    <SortItems :dataSource="dataSource" />
  </div>
</template>

<style scoped>
.control {
  display: flex;
  gap: 10px;
}
</style>
